<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 舞动健康</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 页面内容区 -->
    <main class="relative min-h-screen pb-6">
        <!-- 顶部导航栏 -->
        <div class="gradient-bg flex items-center justify-between px-4 py-4 sticky top-0 z-20 shadow-md">
            <a href="javascript:history.back()" class="text-white">
                <i class="fa-solid fa-arrow-left text-xl"></i>
            </a>
            <h1 class="text-lg font-medium text-center flex-1 text-white">订单详情</h1>
            <div class="w-8"></div>
        </div>
        
        <!-- 订单状态 -->
        <div class="gradient-bg p-4 text-white">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-xl font-bold">已预约</h2>
                    <p class="text-sm opacity-80 mt-1">请按时前往，如需取消请提前联系教练</p>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-lg p-2">
                    <i class="fa-solid fa-check-circle text-2xl"></i>
                </div>
            </div>
        </div>
        
        <!-- 基本信息 -->
        <div class="bg-white rounded-lg m-4 p-4 shadow-sm">
            <div class="flex items-start mb-4">
                <div class="w-14 h-14 rounded-full overflow-hidden mr-3 border-2 border-primary-DEFAULT flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?q=80&w=300&auto=format&fit=crop" 
                         alt="教练头像" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-medium text-gray-800">李明 · 高级瑜伽教练</h3>
                    <p class="text-sm text-gray-500 mt-1">预约项目：脊柱理疗瑜伽</p>
                </div>
            </div>
            
            <div class="border-t border-gray-100 pt-4">
                <div class="flex items-center mb-3">
                    <i class="fa-regular fa-calendar text-primary-DEFAULT w-5 mr-2"></i>
                    <span class="text-sm">2023年10月15日（周日）14:00-15:30</span>
                </div>
                
                <!-- 地点与导航 -->
                <div class="flex items-start mb-3">
                    <i class="fa-solid fa-location-dot text-primary-DEFAULT w-5 mr-2 mt-1"></i>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-sm">和平里静心瑜伽馆</p>
                                <p class="text-xs text-gray-500">北京市东城区和平里南街18号楼2层</p>
                            </div>
                            <a href="navigation.html" class="bg-primary-DEFAULT text-white text-xs rounded-full px-3 py-1 flex items-center ml-2">
                                <i class="fa-solid fa-location-arrow mr-1"></i>导航
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <i class="fa-regular fa-credit-card text-primary-DEFAULT w-5 mr-2"></i>
                    <span class="text-sm">¥268.00</span>
                </div>
            </div>
        </div>
        
        <!-- 订单信息 -->
        <div class="bg-white rounded-lg m-4 p-4 shadow-sm">
            <h3 class="text-base font-medium mb-3">订单信息</h3>
            
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">订单编号</span>
                    <span>YG2023101501234</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">下单时间</span>
                    <span>2023-10-10 18:23:45</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">支付方式</span>
                    <span>微信支付</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">联系电话</span>
                    <span>138****6789</span>
                </div>
            </div>
        </div>
        
        <!-- 核销码 -->
        <div class="bg-white rounded-lg m-4 p-4 shadow-sm">
            <h3 class="text-base font-medium mb-3">核销码</h3>
            
            <div class="flex flex-col items-center space-y-3">
                <div class="border-2 border-primary-DEFAULT p-1 rounded-lg">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=order_YG2023101501234" 
                         alt="核销二维码" class="w-40 h-40">
                </div>
                <p class="text-sm text-gray-500">请向教练或空间工作人员出示二维码完成核销</p>
                
                <div class="w-full flex mt-3">
                    <div class="flex-1 border-r border-gray-200 flex flex-col items-center">
                        <p class="text-sm font-medium mb-1">教练核销码</p>
                        <div class="border-2 border-primary-light p-1 rounded-lg">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=coach_YG2023101501234" 
                                 alt="教练核销二维码" class="w-24 h-24">
                        </div>
                    </div>
                    <div class="flex-1 flex flex-col items-center">
                        <p class="text-sm font-medium mb-1">空间核销码</p>
                        <div class="border-2 border-primary-light p-1 rounded-lg">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=venue_YG2023101501234" 
                                 alt="场地核销二维码" class="w-24 h-24">
                        </div>
                    </div>
                </div>
                
                <div class="mt-2 flex items-center">
                    <div class="flex items-center justify-center w-6 h-6 rounded-full bg-primary-light mr-2">
                        <i class="fa-solid fa-info text-white text-xs"></i>
                    </div>
                    <p class="text-xs text-gray-500">课程开始前15分钟可使用，有效期30分钟</p>
                </div>
            </div>
        </div>
        
        <!-- 底部按钮 -->
        <div class="px-4 flex space-x-3 mt-6">
            <a href="tel:10086" class="flex-1 py-3 rounded-full border border-gray-300 text-center text-gray-700">
                <i class="fa-solid fa-phone mr-2"></i>联系教练
            </a>
            <button class="flex-1 py-3 rounded-full bg-primary-DEFAULT text-white text-center">
                再次预约
            </button>
        </div>
    </main>
</body>
</html> 